<template>
    <div>
        <div style="margin: 0px auto;text-align: center">
            <el-badge :value="tags.length" class="item" type="primary">
                <el-button size="small">标签数</el-button>
            </el-badge>
        </div>
        <div class="admin-tags">
            <el-tag
                    :key="index"
                    style="margin-bottom: 10px"
                    v-for="(tag,index) in tags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                {{tag.tagName}}
            </el-tag>
            <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </div>


    </div>
</template>

<script>

    export default {
        name: "tags",
        data() {
            return {
                tags:[],
                inputVisible: false,
                inputValue: ''
            };
        },
        methods: {
            handleClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
                //更新数据库
                this.deleteRequest('/admin/tags/?id=' +  tag.id).then(resp => {
                    if(resp){
                        this.$message.success("删除成功");
                    }
                })

            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(() => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                this.inputVisible = false;
                //添加标签
                this.postRequest('/admin/tags/?tagName=' + this.inputValue).then(resp=>{
                    if(resp){
                        this.$message.success("添加成功");
                        this.init();
                    }
                })
                this.inputValue = '';
            },
            init(){
                this.getRequest('/admin/tags/').then(resp => {
                    if(resp){
                        this.tags = resp;
                    }
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style>
    .admin-tags{
        border: 2px solid rgba(104, 153, 13, 0.45);
        border-radius: 20px;
        padding: 10px 10px;
        max-width: 500px;
        margin: 10px auto;
    }
    .admin-tags .el-tag {
        margin-right: 10px ;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>